<template>
  <div style="margin: 20px">
    <el-main>
    <el-input :rows="8"
              type="textarea"
              maxlength="10000"
              v-model="sentence"
              placeholder="请输入内容"
              show-word-limit
              style="width: 50%">
    </el-input>
      <div style="margin-left: 700px;margin-top: -180px">
<!--      <div style="margin-left: 900px;margin-top: -90px">-->
<!--      <div>-->
<!--      <el-select  style="width: 70%;" v-model="value" placeholder="请选择">-->
<!--        <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--      </div>-->
<!--      <div style="margin-top:10px" >-->
<!--      <el-button type="info" style="width: 70%;" >分析</el-button>-->
<!--      </div>-->
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
            height="200px">
          <el-table-column
              prop="id"
              label="ID"
              width="100">
          </el-table-column>
          <el-table-column
              prop="text"
              label="Text"
              width="180"
              :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="info" size="small" @click="init(scope.row.text)">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:50px" >
      <el-divider content-position="center">处理结果</el-divider>
      <el-tabs type="border-card">
        <el-tab-pane label="句子视图">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="中文分词" @change="Segmentation"></el-checkbox>
          <el-checkbox label="中文分句" @change="SenSplit"></el-checkbox>
          <el-checkbox label="词性标注" @change="PosTag"></el-checkbox>
          <el-checkbox label="命名实体识别" @change="NamedEntity"></el-checkbox>
          <el-checkbox label="句子解析树" @change="SpTree1"></el-checkbox>
          <el-checkbox label="句子依存" @change="SpTree2"></el-checkbox>
        </el-checkbox-group>
        <div style="margin: 20px">
          中文分词
          <el-input :rows="10"
                    type="textarea"
                    v-model="answer1"
                    placeholder="处理结果显示,首次运行响应时间较长....."
                    autosize>
          </el-input>
        </div>
        <div style="margin: 20px">
          中文分句
          <el-input :rows="10"
                    type="textarea"
                    v-model="answer2"
                    placeholder="等待结果......"
                    autosize>
          </el-input>
        </div>
        <div style="margin: 20px">
          词性标注
          <el-input :rows="10"
                    type="textarea"
                    v-model="answer3"
                    placeholder="等待结果......"
                    autosize>
          </el-input>
        </div>
        <div style="margin: 20px">
          命名实体识别
          <el-input :rows="10"
                    type="textarea"
                    v-model="answer4"
                    placeholder="等待结果......"
                    autosize>
          </el-input>
        </div>
        <div style="margin: 20px">
          句子解析树
          <el-input :rows="10"
                    type="textarea"
                    v-model="answer5"
                    placeholder="等待结果......"
                    autosize>
          </el-input>
        </div>
        <div style="margin: 20px">
          句子依存
          <el-input :rows="10"
                    type="textarea"
                    autosize
                    v-model="answer6"
                    placeholder="等待结果......"
          >
          </el-input>
        </div>
      </el-tab-pane>
        <el-tab-pane label="原始处理">
          <div style="margin: 10px">
            <el-button type="primary" @click="segmentation" plain>中文分词</el-button>
            <el-button type="info" @click="senSplit" plain>中文分句</el-button>
            <el-button type="warning" @click="posTag" plain>词性标注</el-button>
            <el-button type="danger" @click="namedEntity" plain>命名实体识别</el-button>
            <el-button type="success" @click="spTree1" plain>句子解析树</el-button>
            <el-button type="primary" @click="spTree2" plain>句子依存</el-button>
          </div>
          <div style="margin: 20px">
            <el-input :rows="10"
                      type="textarea"
                      v-model="answer"
                      placeholder="处理结果显示,首次运行响应时间较长....."
                      style="width: 100%"
                      :autosize="{ minRows: 10}">
            </el-input>
          </div>
        </el-tab-pane>

        <el-tab-pane label="标签释义">
          词性标注
          <el-table
              :data="TagData"
              stripe
              style="width: 100%">
            <el-table-column
                prop="tag"
                label="标签"
                width="180">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述"
                width="180">
            </el-table-column>
            <el-table-column
                prop="example"
                label="示例">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      </div>
    </el-main>
<!--    <el-header>-->
<!--    <div>-->
<!--      <el-tag color="orange">其他名词/NN</el-tag>-->
<!--      <el-tag color="#5555FF">其他动词/VV</el-tag>-->
<!--      <el-tag color="#DDDDDD">副词/AD</el-tag>-->
<!--      <el-tag color="#FF69B4">介词/P</el-tag>-->
<!--      <el-tag color="#7B68EE">方位词/LC</el-tag>-->
<!--      <el-tag color="#77FFCC">限定词/DT</el-tag>-->
<!--      <el-tag color="#FFFFBB"> “的”作为关联标记或所有格标记/DEG</el-tag>-->
<!--      <el-tag color="#FFE4E1">其他名词修饰语/JJ</el-tag>-->
<!--      <el-tag color="#FF4500">度量词/M</el-tag>-->
<!--      <el-tag color="#E6E6FA">谓词性形容词/VA</el-tag>-->
<!--      <el-tag color="#FFE4B5">“的”作为补语标记或名词化标记/DEC</el-tag>-->
<!--      <el-tag color="#F5FFFA">标点/PU</el-tag>-->
<!--      <el-tag color="#BDB76B">把字结构/BA</el-tag>-->
<!--      <el-tag color="#8FBC8F">系动词/VC</el-tag>-->
<!--      <el-tag color="#B0C4DE">基数词/CD</el-tag>-->
<!--      <el-tag color="#A9A9A9">专有名词/NR</el-tag>-->
<!--    </div>-->
<!--    </el-header>-->
  </div>
</template>



<script>
import request from "../utils/request";
import dagreD3 from "dagre-d3";

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      sentence: '他叫汤姆去拿外衣。\n' +
          '他点头表示同意我的意见。\n' +
          '我们即将以昂扬的斗志迎来新的一年。\n' +
          '国内专家学者40余人参加研讨会。\n',
      answer: '',
      answer1: '',
      answer2: '',
      answer3: '',
      answer4: '',
      answer5: '',
      answer6: '',
      checkList: [],
      options: [{
        value: '选项1',
        label: '13-14讲话'
      },],
      tableData: [],
      currentPage:1,
      pageSize: 100,
      total: 0,
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/api/zutnlp", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    //命名实体识别
    namedEntity() {
      request.post("/api/zutnlp/namedEntity", this.sentence).then(res => {
        console.log(res)
        this.answer = res.data
      })
    },
    NamedEntity() {
      request.post("/api/zutnlp/namedEntity", this.sentence).then(res => {
        console.log(res)
        this.answer4 = res.data
      })
    },
    // 词性标注
    posTag() {
      request.post("/api/zutnlp/posTag", this.sentence).then(res => {
        console.log(res)
        this.answer = res.data
      })
    },
    PosTag() {
      request.post("/api/zutnlp/posTag", this.sentence).then(res => {
        console.log(res)
        this.answer3 = res.data
      })
    },
    //中文分词
    segmentation() {
      request.post("/api/zutnlp/segmentation", this.sentence).then(res => {
        console.log(res)
        this.answer = res.data
      })
    },
    Segmentation() {
      request.post("/api/zutnlp/segmentation", this.sentence).then(res => {
        console.log(res)
        this.answer1 = res.data
      })
    },
    //中文分句
    senSplit() {
      request.post("/api/zutnlp/senSplit", this.sentence).then(res => {
        console.log(res)
        this.answer = res.data
      })
    },
    SenSplit() {
      request.post("/api/zutnlp/senSplit", this.sentence).then(res => {
        console.log(res)
        this.answer2 = res.data
      })
    },
    //句子解析树
    spTree1() {
      request.post("/api/zutnlp/spTree1", this.sentence).then(res => {
        console.log(res)
        this.answer = res.data
      })
    },
    SpTree1() {
      request.post("/api/zutnlp/spTree1", this.sentence).then(res => {
        console.log(res)
        this.answer5 = res.data
      })
    },
    //句子依存
    spTree2() {
      request.post("/api/zutnlp/spTree2", this.sentence).then(res => {
        console.log(res)
        this.answer = res.data
      })
    },
    SpTree2() {
      request.post("/api/zutnlp/spTree2", this.sentence).then(res => {
        console.log(res)
        this.answer6 = res.data
      })
    },
    init(value) {
      this.sentence = value;
    },
  }
}
</script>
